<template>
  <ex-dialog width="700px" class="ex-diolog" :title="title" :visible="visible" @closeDialog="handleClose">
    <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="140px" class="demo-ruleForm">
      <el-form-item label="抖音商户id:" prop="accountId">
        <el-input type="text" v-model="ruleForm.accountId" autocomplete="off" placeholder="输入抖音商户id" :style="{width: inputWidth}"></el-input>
      </el-form-item>
      <el-form-item label=" 抽佣方式：" prop="commissionType">
        <el-select v-model="ruleForm.commissionType" filterable placeholder="请选择" :style="{width: inputWidth}">
          <el-option v-for="item in commissionTypeList" :key="item.id" :label="item.value" :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="佣金比例:" prop="commissionRatio">
        <el-input type="text" v-model="ruleForm.commissionRatio" autocomplete="off" placeholder="输入佣金比例" :style="{width: inputWidth}"
          maxlength="11">
          <template slot="append">%</template>
        </el-input>
      </el-form-item>
      <el-form-item label="合作时间：" prop="date"> 
        <el-date-picker
          v-model="ruleForm.date"
          @change="getEarnACardTime"
          type="datetimerange" 
          format="yyyy-MM-dd HH:mm:ss"
          value-format="yyyy-MM-dd HH:mm:ss"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          >
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')" :loading="loading">确认</el-button>
        <el-button @click="handleClose('ruleForm')">取消</el-button>
      </el-form-item>
    </el-form>
  </ex-dialog>
</template>
<script>
// components
import Loading from '@/components/Loading/index'
// api
import {
  addanchor,
  editanchor,
  merchantDetail,
} from "@/api/setting/visitorMerchant"

export default {
  components: {
    Loading
  },
  props: {
    visible: Boolean,
    id: String,
    pathType: String,
  },
  data() {
    var validateAccount = (rule, value, callback) => {
      let regNumber = /(^[0-9](\d+)?(\.\d{1,2})?$)|(^\d\.\d{1,2}$)/; //大于0的数值且最多保留两位小数的数值
      console.log("value", value);
      if (value === "") {
        callback(new Error("输入佣金比例"));
      } else {
        if (regNumber.test(value) === false || value === '0.00' || value === '0.0') {
          return callback(new Error('请填写等于或大于0且最多保留两位小数的数值'));
        } else {
          return callback()
        }
      }
      

      // let regNumber = /(^[0-9](\d+)?(\.\d{1,2})?$)|(^\d\.\d{1,2}$)/; //大于等于0的数值且最多保留两位小数的数值
      // console.log("value", value);
      // if (value === "") {
      //   callback(new Error("输入佣金比例"));
      // } else {
      //   if (regNumber.test(value) === false || value === '0.00' || value === '0.0') {
      //     return callback(new Error('请填写等于或大于0且最多保留两位小数的数值'));
      //   } else {
      //     return callback()
      //   }
      // }
      
    };
    return {
      inputWidth: "400px",
      loading: false,
      imgLoading: false,
      commissionTypeList:[
        {id: '1', value: '整体抽佣'}
      ],//主播类型数组
      dyShopAccountIdLs:[
        {id:1,value:'门店1'}
      ],//抖音门店
      ruleForm: {
        date: [],
        accountId: '',//抖音商家id
        commissionType: '',//抽佣方式: 1整体抽佣
        commissionRatio:'',//佣金比例
        cooperationEndTime: '',//	合作结束时间
        cooperationStartTime: '',//合作开始时间
        id: '',//ID,只有编辑时传
      },
      rules: {
        accountId: [
          { required: true, message: '请输入抖音商家id', trigger: ['change','blur'] }
        ],
        commissionType: [
          { required: true, message: '请选择类型', trigger: ['change','blur'] }
        ],
        commissionRatio: [
          { required: true, validator: validateAccount, trigger: 'blur' }
        ],
        date: [
          {required: true,message: "请选择合作日期",trigger: ["change"]}
        ],
      }
    }
  },
  computed: {

  },
  created() {
    this.ruleForm.id = this.id
    this.title = '提交合作关系'
    console.log('this.pathType',this.pathType)
    if(this.pathType == 'edit'){
      this.getDatail()
    }
  },
  methods: {
    //获取主播类型字典
    getAnchorTypeLs() {
        var dictType = "anchor_sys_user_type";
        this.$getSelectList(dictType)
          .then((res) => {
            this.anchorTypeLs = res.result[0].dictList;
          })
          .catch(() => {});
      },
    //获取详情
    getDatail() {
      var id = this.id
      merchantDetail(id).then(res => {
        this.ruleForm = {
          accountId: res.result.accountId,
          commissionType: res.result.commissionType,
          commissionRatio: res.result.commissionRatio,
          date: [],
          cooperationStartTime: res.result.cooperationStartTime,
          cooperationEndTime: res.result.cooperationEndTime,
          id: this.id,
        }
        this.ruleForm.date[0] = res.result.cooperationStartTime
        this.ruleForm.date[1] = res.result.cooperationEndTime 

        console.log('this.ruleForm',this.ruleForm)
      })
    },
    // 赚卡有效期
    getEarnACardTime(e){
      this.ruleForm.cooperationStartTime = e[0] 
      this.ruleForm.cooperationEndTime = e[1]
    },
    //新增合作关系
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.loading = true
          var data = {
            ...this.ruleForm
          }
          if(this.pathType == 'add'){
            addanchor(data).then(res => {
              setTimeout(() => {
                this.handleClose()
                this.$message.success('创建成功')
                this.$emit('success')
                this.loading = false
              }, 1000);
            }).catch(() => {
              this.loading = false
            }).finally(() => {

            })
          }else if(this.pathType == 'edit'){
            editanchor(data).then(res => {
              setTimeout(() => {
                this.handleClose()
                this.$message.success('创建成功')
                this.$emit('success')
                this.loading = false
              }, 1000);
            }).catch(() => {
              this.loading = false
            }).finally(() => {

            })
          }
          
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },

    //取消
    handleClose(formName) {
      this.$emit('update:visible', false)
      // this.$refs[formName].resetFields();
    },
    //确认
    handleConfirm() {
      this.$emit('success', '你好')
    },
    handleSuccess(msg) {
      if (msg === '已拒绝') {
        var type = 'error'
      } else {
        var type = 'success'
      }
      this.$message({
        message: msg,
        type: type,
        duration: 1500,
        onClose: () => {
          this.handleClose()
          this.$emit('success')
        }
      })
    },
  }
}
</script>
<style lang="scss" scoped>
.ex-diolog {
  ::v-deep .ex--dialog--footer {
    border: none !important;
    padding: 0 !important;
  }

  ::v-deep .ex--dialog--main {
    padding: 10px 20px !important;
  }
}

::v-deep .avatar-uploader2 .el-upload {
  width: 100% !important;
}

.avatar-uploader2 {
  width: 130px;
  height: 130px;
  text-align: center;
  line-height: 130px;
  background-color: #fbfdff;
  border: 1px dashed #c0ccda;
}

.banner_img {
  width: 130px;
  height: 130px;
}

.el-input {
  width: 300px;
}
</style>